import React, { Component } from 'react';
import autoBind from 'react-autobind';
import qs from 'qs';
import { Link, browserHistory } from 'dva/router';
import { List, InputItem  } from 'antd-mobile';
import { getSearch, getUserId } from '../../../utils/utils';

import Auth from '../../../utils/auth';

// style
import styles from './index.css';
import IconfontStyle from '../../../assets/iconfont/iconfont.css';

class CaseierBody extends Component {
	constructor(props) {
        super(props)
        autoBind(this)
    }
    componentDidMount() {
    	const { location, dispatch } = this.props
    	const search = getSearch(location)

    	if(search.code) {
    		this.onClickWeixin()
    	}
    }
    
    onClickWeixin() {
    	const { location, dispatch } = this.props
    	const search = getSearch(location)
    	Auth.startAuth((data) => {
    		dispatch({
	   			type: 'order/payDoPay',
	   			payload: {
	   				"userId": getUserId(),
	   				"busiType": 0,
	   				"orderId": search.orderId,
	   				"orderAmount": search.orderAmount,
	   				"channel": "WEIXIN",
	   				"terminal": "WAP",
	   				"subject": search.orderSn,
	   				"retUrl": "http://www.meyley.cn/payresult",

				    "out_trade_no": search.orderSn,
				    "body": search.orderId,
				    "total_fee": '0.01',
				    // "total_fee": search.orderAmount
				    "openId": data.openid
				}
	   		})
    	})

   //  	dispatch({
   //  		type: 'order/payWeixinpay',
   //  		payload: {
			//     "out_trade_no": search.orderSn,
			//     "body": search.orderId,
			//     "total_fee": '0.01',
			//     // "total_fee": search.orderAmount
			// }
   //  	})
   		
    }
    onClickAlipay() {
		const { location, dispatch } = this.props
    	const search = getSearch(location)

    	dispatch({
    		type: 'order/payAlipay',
    		payload: {
			    "out_trade_no": search.orderSn,
			    "body": search.orderId,
			    // "total_fee": '0.01',
			    "total_fee": search.orderAmount,
			    "subject": '魅力网网购支付'
			}
    	})
    }
	render() {
		const { location } = this.props
    	const searchParam = getSearch(location)

	 	return (
	 		<div className={styles['caseier-body']}>
	 			<List className={styles['caseier-body-item']}>
				    <div className={styles['caseier-body-item-item-wrap']}>
				    	<div className={styles['caseier-body-item-item']}>
					    	<span className={styles['caseier-body-item-left']}>
					    		订单编号：
					    	</span>

					    	<span className={styles['caseier-body-item-right']}>
					    		{searchParam.orderSn}
					    	</span>
					    </div>
				    </div>
				    <div className={styles['caseier-body-item-item-wrap']}>
				    	<div className={styles['caseier-body-item-item']}>
					    	<span className={styles['caseier-body-item-left']}>
					    		订单金额：
					    	</span>

					    	<span className={styles['caseier-body-item-right']}>
					    		{searchParam.orderAmount}
					    	</span>
					    </div>
				    </div>
				</List>

				<List className={styles['caseier-body-item']}>
				    <List.Item style={{paddingTop: '0.12rem', paddingBottom: '0.12rem'}} arrow="horizontal" onClick={this.onClickWeixin}>
				    	<img className={styles['caseier-body-item-img']} style={{width: '0.68rem', height: '0.68rem'}} src={require('../../../assets/weixin.png')} />
				    	<div className={styles['caseier-body-item-list']} >
				    		<div className={styles['caseier-body-item-title']}>微信支付</div>
				    		<div className={styles['caseier-body-item-des']}>微信安全支付</div>
				    	</div>
				    </List.Item>
				    <List.Item style={{paddingTop: '0.12rem', paddingBottom: '0.12rem'}} arrow="horizontal" onClick={this.onClickAlipay}>
				    	<img  className={styles['caseier-body-item-img']} style={{width: '0.68rem', height: '0.68rem'}}  src={require('../../../assets/alipay.png')} />
				    	<div className={styles['caseier-body-item-list']} >
				    		<div className={styles['caseier-body-item-title']}>支付宝支付</div>
				    		<div className={styles['caseier-body-item-des']}>使用支付宝安全支付</div>
				    	</div>
				    </List.Item>
				</List>

	 		</div>
	  	);
	}
};

CaseierBody.propTypes = {
};

export default CaseierBody
